

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>Sass - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=444247071,3464022379&fm=26&gp=0.jpg') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Sass">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-07-28 14:55" pubdate>
        2020年7月28日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      10.5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      142
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Sass</h1>
            
            <div class="markdown-body">
              <blockquote>
<p>在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。</p>
</blockquote>
<p>Basic Rules</p>
<h1 id="嵌套规则-Nested-Rules"><a href="#嵌套规则-Nested-Rules" class="headerlink" title="嵌套规则 (Nested Rules)"></a>嵌套规则 (Nested Rules)</h1><blockquote>
<p>Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器</p>
</blockquote>
<p>例如：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#main p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00ff00<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 97%<span class="token punctuation">;</span>

  <span class="token selector">.redbox </span><span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #000000<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #00ff00<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 97%<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token selector">#main p .redbox</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #000000<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：</p>
<h1 id="父选择器-amp"><a href="#父选择器-amp" class="headerlink" title="父选择器 &amp;"></a>父选择器 &amp;</h1><blockquote>
<p>在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，</p>
</blockquote>
<p>1例如，当给某个元素设定 <code>hover</code> 样式时，或者当 <code>body</code> 元素有某个 classname 时，可以用 <code>&amp;</code> 代表嵌套规则外层的父选择器。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">a </span><span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">&#123;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token selector">body.firefox <span class="token parent important">&amp;</span> </span><span class="token punctuation">&#123;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译成</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
  <span class="token selector">a:hover</span> <span class="token punctuation">&#123;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
  <span class="token selector">body.firefox a</span> <span class="token punctuation">&#123;</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译后的 CSS 文件中 <code>&amp;</code> 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
  <span class="token selector">a </span><span class="token punctuation">&#123;</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
    <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">&#123;</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">#main a</span> <span class="token punctuation">&#123;</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">#main a:hover</span> <span class="token punctuation">&#123;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<blockquote>
<p><code>&amp;</code> 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器</p>
</blockquote>
<p>例如</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>-sidebar </span><span class="token punctuation">&#123;</span> 
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> 
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#main-sidebar</span> <span class="token punctuation">&#123;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h1 id="属性嵌套-Nested-Properties"><a href="#属性嵌套-Nested-Properties" class="headerlink" title="属性嵌套 (Nested Properties)"></a>属性嵌套 (Nested Properties)</h1><blockquote>
<p>有些 CSS 属性遵循相同的命名空间 (namespace)，比如 <code>font-family, font-size, font-weight</code> 都以 <code>font</code> 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.funky </span><span class="token punctuation">&#123;</span>
  <span class="token selector">font: </span><span class="token punctuation">&#123;</span>
    <span class="token property">family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span>
    <span class="token property">size</span><span class="token punctuation">:</span> 30em<span class="token punctuation">;</span>
    <span class="token property">weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.funky</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 30em<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>命名空间也可以包含自己的属性值，</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.funky </span><span class="token punctuation">&#123;</span>
  <span class="token selector">font: 20px/24px </span><span class="token punctuation">&#123;</span>
    <span class="token property">family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span>
    <span class="token property">weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.funky</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 20px/24px<span class="token punctuation">;</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> fantasy<span class="token punctuation">;</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id=""><a href="#" class="headerlink" title=""></a></h2><h1 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h1><p><code>/* */</code> 与 <code>//</code> (Comments: <code>/* */</code> and <code>//</code>)</p>
<blockquote>
<p>Sass 支持标准的 CSS 多行注释 <code>/* */</code>(前者)，以及单行注释 <code>//</code>(后者)，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token comment">/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */</span>
<span class="token selector">body </span><span class="token punctuation">&#123;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>

<span class="token comment">// These comments are only one line long each.</span>
<span class="token comment">// They won't appear in the CSS output,</span>
<span class="token comment">// since they use the single-line comment syntax.</span>
<span class="token selector">a </span><span class="token punctuation">&#123;</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */</span>
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>将 <code>!</code> 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。</p>
</blockquote>
<p>插值语句 (interpolation) 也可写进多行注释中输出变量值：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$version</span></span><span class="token punctuation">:</span> <span class="token string">"1.2.3"</span><span class="token punctuation">;</span>
<span class="token comment">/* This CSS is generated by My Snazzy Framework version #&#123;$version&#125;. */</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* This CSS is generated by My Snazzy Framework version 1.2.3. */</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>​        </p>
<h1 id="Sass基础"><a href="#Sass基础" class="headerlink" title="Sass基础"></a>Sass基础</h1><blockquote>
<p>Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 <a target="_blank" rel="noopener" href="http://compass-style.org/">Compass</a>）有助于更好地组织管理样式文件，以及更高效地开发项目。</p>
</blockquote>
<h2 id="1-特色功能"><a href="#1-特色功能" class="headerlink" title="1.特色功能"></a>1.特色功能</h2><ul>
<li>完全兼容 CSS3</li>
<li>在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能</li>
<li>通过<a target="_blank" rel="noopener" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">函数</a>进行颜色值与属性值的运算</li>
<li>提供<a target="_blank" rel="noopener" href="https://www.sass.hk/docs/#t8">控制指令 (control directives)</a>等高级功能</li>
<li>自定义输出格式</li>
</ul>
<h2 id="2-语法格式-Syntax"><a href="#2-语法格式-Syntax" class="headerlink" title="2. 语法格式 (Syntax)"></a>2. 语法格式 (Syntax)</h2><blockquote>
<blockquote>
<p>Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的IE 滤镜写法。这种格式以 <code>.scss</code> 作为拓展名。</p>
<p>另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 <a target="_blank" rel="noopener" href="http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html">the indented syntax reference</a>。这种格式以 <code>.sass</code> 作为拓展名。</p>
</blockquote>
</blockquote>
<h2 id="3-缓存机制"><a href="#3-缓存机制" class="headerlink" title="3.缓存机制"></a>3.缓存机制</h2><p>Sass 自动缓存编译后的模板与 <a target="_blank" rel="noopener" href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials">partials</a>，这样做能够显著提升重新编译的速度，尤其在处理由 <code>@import</code> 导入多个子文件的大型项目时。</p>
<p>单独使用 Sass，缓存内容保存在 <code>.sass-cache</code> 文件夹中。在 Rails 和 Merb 项目中缓存文件保存在 <code>tmp/sass-cache</code> 文件夹中（可通过 <a target="_blank" rel="noopener" href="https://www.sass.hk/docs/"><code>:cache_location</code></a> 修改路径）。禁用缓存可将 <code>:cache</code> 设为 <code>false</code>。</p>
<h1 id="1-变量-Variables"><a href="#1-变量-Variables" class="headerlink" title="1.变量 (Variables)"></a>1.变量 (Variables)</h1><blockquote>
<p>SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 5em<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>直接使用即调用变量：</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> $width<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 <code>!global</code> 声明</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 5em !global<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">#sidebar </span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 5em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">#sidebar</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 5em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h1 id="2-数据类型-Data-Types"><a href="#2-数据类型-Data-Types" class="headerlink" title="2.数据类型 (Data Types)"></a>2.数据类型 (Data Types)</h1><p>SassScript 支持 6 种主要的数据类型：</p>
<ul>
<li>数字，<code>1, 2, 13, 10px</code></li>
<li>字符串，有引号字符串与无引号字符串，<code>&quot;foo&quot;, &#39;bar&#39;, baz</code></li>
<li>颜色，<code>blue, #04a3f9, rgba(255,0,0,0.5)</code></li>
<li>布尔型，<code>true, false</code></li>
<li>空值，<code>null</code></li>
<li>数组 (list)，用空格或逗号作分隔符，<code>1.5em 1em 0 2em, Helvetica, Arial, sans-serif</code></li>
<li>maps, 相当于 JavaScript 的 object，<code>(key1: value1, key2: value2)</code></li>
</ul>
<blockquote>
<p>SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 <code>!important</code> 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。</p>
</blockquote>
<h2 id="1-字符串-Strings"><a href="#1-字符串-Strings" class="headerlink" title="1. 字符串 (Strings)"></a>1. 字符串 (Strings)</h2><ul>
<li>有引号字符串 (quoted strings),例如<code>&quot;Lucida Grande&quot;</code> <code>&#39;http://sass-lang.com&#39;</code>；</li>
<li>无引号字符串 (unquoted strings)，<code>sans-serif</code> bold</li>
</ul>
<p>在编译 CSS 文件时不会改变其类型，只有一种情况例外，使用 <code>#&#123;&#125;</code> (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名（这个我们下面再研究）</p>
<h2 id="2-数组-Lists"><a href="#2-数组-Lists" class="headerlink" title="2. 数组 (Lists)"></a>2. 数组 (Lists)</h2><blockquote>
<p>数组 (lists) 指 Sass 如何处理 CSS 中 <code>margin: 10px 15px 0 0</code> 或者 <code>font-face: Helvetica, Arial, sans-serif</code> 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 也就是 只包含一个值的数组。</p>
</blockquote>
<h3 id="a-定义数组，读取数组！"><a href="#a-定义数组，读取数组！" class="headerlink" title="a.定义数组，读取数组！"></a>a.定义数组，读取数组！</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token comment">//$linkColor:red blue yellow darkcyan deepink;</span>
<span class="token property"><span class="token variable">$linkColor</span></span><span class="token punctuation">:</span> red<span class="token punctuation">,</span> blue<span class="token punctuation">,</span> yellow<span class="token punctuation">,</span> darkcyan<span class="token punctuation">,</span> deepink<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.active </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$linkColor</span><span class="token punctuation">,</span> 3<span class="token punctuation">)</span> <span class="token comment">//yellow</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h3 id="b-append用法-append-list1-val-separator"><a href="#b-append用法-append-list1-val-separator" class="headerlink" title="b.append用法(append($list1, $val, [$separator]))"></a>b.append用法(append($list1, $val, [$separator]))</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$list</span></span><span class="token punctuation">:</span>red<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>white<span class="token punctuation">;</span><span class="token comment">//(#ff0000, #ffff00, #ffffff)</span>

<span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span>black<span class="token punctuation">;</span> <span class="token comment">//#000000</span>

<span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$list</span><span class="token punctuation">,</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token comment">//(#ff0000, #ffff00, #ffffff, #000000)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="c-join的用法-join-list1-list2-separator"><a href="#c-join的用法-join-list1-list2-separator" class="headerlink" title="c.join的用法(join($list1, $list2, [$separator]))"></a>c.join的用法(join($list1, $list2, [$separator]))</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$list</span></span><span class="token punctuation">:</span>red<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>white<span class="token punctuation">;</span><span class="token comment">//(#ff0000, #ffff00, #ffffff)</span>

<span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span>black<span class="token punctuation">;</span> <span class="token comment">//#000000</span>

<span class="token function">join</span><span class="token punctuation">(</span><span class="token variable">$list</span><span class="token punctuation">,</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token comment">//(#ff0000, #ffff00, #ffffff, #000000)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>看上去和append用法一样，那两者有什么区别呢？<br>我们看一下文档</p>
<p>append</p>
<blockquote>
<p>Appends a single value to the end of a list. If a $separator argument is provided (the default is auto), the entire list the function returns will use that separator    </p>
<p>append($list1, $val, [$separator])</p>
<p>将单个值附加到列表的末尾。 如果提供了$ separator参数（默认值为auto），则函数返回的整个列表将使用该分隔符</p>
</blockquote>
<p>join</p>
<blockquote>
<p>Appends $list2 to the end of $list1. The $separator argument can contain the values comma, space or auto. The auto value, which is the default, will use the separator in the first list.</p>
<p>join($list1, $list2, [$separator])</p>
<p>将$ list2追加到$ list1的末尾。 $ separator参数可以包含逗号，空格或自动值。 自动值是默认值，它将在第一个列表中使用分隔符。</p>
</blockquote>
<p>好像合并变量的时候，单个和数组的区别，上面例子我们用了一个单个属性的变量，这次我们用两个数组，来进行list的函数操作</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span>pink<span class="token punctuation">,</span>deeppink<span class="token punctuation">;</span><span class="token comment">//(#ffc0cb, #ff1493)</span>
<span class="token property"><span class="token variable">$list</span></span><span class="token punctuation">:</span>red<span class="token punctuation">,</span>yellow<span class="token punctuation">,</span>white<span class="token punctuation">;</span><span class="token comment">//(#ff0000, #ffff00, #ffffff)</span>
<span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$colors</span><span class="token punctuation">,</span><span class="token variable">$list</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//(#ffc0cb, #ff1493, (#ff0000, #ffff00, #ffffff))</span>
<span class="token function">join</span><span class="token punctuation">(</span><span class="token variable">$colors</span><span class="token punctuation">,</span><span class="token variable">$list</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//(#ffc0cb, #ff1493, #ff0000, #ffff00, #ffffff)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>当定义两个scss的数组，我们让两个数组进行append操作的时候，会把最后一个值，不拆分仍然当成一个整体的值放入到第一个参数的数组中！而join就相当于把两个数组合并成一个正常的一维数组</p>
<h3 id="d-length-list-返回数组长度"><a href="#d-length-list-返回数组长度" class="headerlink" title="d.length($list)返回数组长度"></a>d.length($list)返回数组长度</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span>pink<span class="token punctuation">,</span>deeppink<span class="token punctuation">;</span><span class="token comment">//(#ffc0cb, #ff1493)</span>
<span class="token function">length</span><span class="token punctuation">(</span><span class="token variable">$colors</span><span class="token punctuation">)</span><span class="token comment">//2</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h3 id="e-nth-list-n-返回列表中的第n个元素"><a href="#e-nth-list-n-返回列表中的第n个元素" class="headerlink" title="e.nth($list, $n)返回列表中的第n个元素"></a>e.nth($list, $n)返回列表中的第n个元素</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$long</span></span><span class="token punctuation">:</span>1<span class="token punctuation">,</span>2<span class="token punctuation">,</span>3<span class="token punctuation">,</span>4<span class="token punctuation">,</span>5<span class="token punctuation">,</span>6<span class="token punctuation">;</span><span class="token comment">//(1, 2, 3, 4, 5, 6)</span>
<span class="token function">nth</span><span class="token punctuation">(</span><span class="token variable">$long</span> <span class="token punctuation">,</span>1<span class="token punctuation">)</span><span class="token comment">//1</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h3 id="f-set-nth-list-n-value-将列表中的第n个元素设置为提供的值"><a href="#f-set-nth-list-n-value-将列表中的第n个元素设置为提供的值" class="headerlink" title="f.set-nth($list, $n, $value)将列表中的第n个元素设置为提供的值"></a>f.set-nth($list, $n, $value)将列表中的第n个元素设置为提供的值</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">set-nth</span><span class="token punctuation">(</span><span class="token variable">$long</span><span class="token punctuation">,</span>2<span class="token punctuation">,</span>9999<span class="token punctuation">)</span><span class="token comment">//(1, 9999, 3, 4, 5, 6)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h3 id="g-index-list-value-返回由-value的索引"><a href="#g-index-list-value-返回由-value的索引" class="headerlink" title="g. index($list, $value)返回由$value的索引"></a>g. index($list, $value)返回由$value的索引</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span>#fffff<span class="token punctuation">,</span>#ccccc<span class="token punctuation">,</span>#c3c4c5<span class="token comment">//("#fffff", "#ccccc", #c3c4c5)</span>
<span class="token function">index</span><span class="token punctuation">(</span><span class="token variable">$colors</span><span class="token punctuation">,</span>#ccccc<span class="token punctuation">)</span> <span class="token comment">//2</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h3 id="h-list-separator-list-以字符串形式返回列表中使用的分隔符的名称"><a href="#h-list-separator-list-以字符串形式返回列表中使用的分隔符的名称" class="headerlink" title="h.list-separator($list)以字符串形式返回列表中使用的分隔符的名称"></a>h.list-separator($list)以字符串形式返回列表中使用的分隔符的名称</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">ist-separator</span><span class="token punctuation">(</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 2<span class="token punctuation">,</span> 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//'comma 逗号'</span>
<span class="token function">list-separator</span><span class="token punctuation">(</span><span class="token punctuation">(</span>1 2 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//'space 空格'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>


<h2 id="3-Maps键值对集合"><a href="#3-Maps键值对集合" class="headerlink" title="3.Maps键值对集合"></a>3.Maps键值对集合</h2><blockquote>
<p>Maps必须被圆括号包围，键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象。（包括任意的sassscript表达式 arbitrary SassScript expressions） 和Lists一样Maps主要为sassscript函数服务</p>
</blockquote>
<div class="code-wrapper"><pre><code>### a.定义值的方式</code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$map</span></span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">,</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">)</span><span class="token comment">//(width: 100px, height: 200px)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h3 id="b-map-get-map-key-返回与指定键关联的值"><a href="#b-map-get-map-key-返回与指定键关联的值" class="headerlink" title="b.map-get($map, $key)返回与指定键关联的值"></a>b.map-get($map, $key)返回与指定键关联的值</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">map-get</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span>width<span class="token punctuation">)</span><span class="token comment">//100px</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h3 id="c-map-remove-map-keys-返回没有指定键的maps"><a href="#c-map-remove-map-keys-返回没有指定键的maps" class="headerlink" title="c.map-remove($map, $keys)返回没有指定键的maps"></a>c.map-remove($map, $keys)返回没有指定键的maps</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">map-remove</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span>width<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//(height: 200px)</span>
<span class="token variable">$map</span> <span class="token comment">//(width: 100px, height: 200px) 不对定义的变量产生影响！</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h3 id="d-map-keys-map-返回指定映射中的键列表"><a href="#d-map-keys-map-返回指定映射中的键列表" class="headerlink" title="d.map-keys($map)返回指定映射中的键列表"></a>d.map-keys($map)返回指定映射中的键列表</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">map-keys</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">)</span><span class="token comment">//("width", "height")</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h3 id="e-map-values-map-返回指定映射中值的列表"><a href="#e-map-values-map-返回指定映射中值的列表" class="headerlink" title="e. map-values($map)返回指定映射中值的列表"></a>e. map-values($map)返回指定映射中值的列表</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">map-values</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">)</span><span class="token comment">//(100px, 200px)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h3 id="f-map-has-key-map-key-返回一个布尔值，该值指示指定的映射是否包含指定的键"><a href="#f-map-has-key-map-key-返回一个布尔值，该值指示指定的映射是否包含指定的键" class="headerlink" title="f.map-has-key($map, $key)返回一个布尔值，该值指示指定的映射是否包含指定的键"></a>f.map-has-key($map, $key)返回一个布尔值，该值指示指定的映射是否包含指定的键</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">map-has-key</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span>width<span class="token punctuation">)</span><span class="token comment">//true</span>
<span class="token function">map-has-key</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span>color<span class="token punctuation">)</span><span class="token comment">//false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h3 id="g-map-merge-map1-map2-返回包含-map2的map，该map2附加到-map1的末尾"><a href="#g-map-merge-map1-map2-返回包含-map2的map，该map2附加到-map1的末尾" class="headerlink" title="g.map-merge($map1, $map2)返回包含$ map2的map，该map2附加到$ map1的末尾"></a>g.map-merge($map1, $map2)返回包含$ map2的map，该map2附加到$ map1的末尾</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$mapChild</span></span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">,</span><span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">)</span><span class="token comment">//(color: red, display: flex)</span>
<span class="token function">map-merge</span><span class="token punctuation">(</span><span class="token variable">$map</span><span class="token punctuation">,</span><span class="token variable">$mapChild</span><span class="token punctuation">)</span><span class="token comment">//(width: 100px, height: 200px, color: red, display: flex)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h2 id="4-Color"><a href="#4-Color" class="headerlink" title="4.Color"></a>4.Color</h2><p><a target="_blank" rel="noopener" href="https://www.tutorialsteacher.com/sass/sass-selector-functions">https://www.tutorialsteacher.com/sass/sass-selector-functions</a></p>
<h1 id="3-运算-Operations"><a href="#3-运算-Operations" class="headerlink" title="3.运算 (Operations)"></a>3.运算 (Operations)</h1><blockquote>
<p>所有数据类型均支持相等运算 <code>==</code> 或 <code>!=</code>，此外，每种数据类型也有其各自支持的运算方式。</p>
</blockquote>
<h2 id="1-数字运算"><a href="#1-数字运算" class="headerlink" title="1.数字运算"></a>1.数字运算</h2><blockquote>
<p>SassScript 支持数字的加减乘除、取整等运算 (<code>+, -, *, /, %</code>)，如果必要会在不同单位间转换值。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1in <span class="token operator">+</span> 8pt<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1.111in<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<blockquote>
<p>关系运算 <code>&lt;, &gt;, &lt;=, &gt;=</code> 也可用于数字运算，相等运算 <code>==, !=</code> 可用于所有数据类型。</p>
</blockquote>
<h3 id="a-除法运算"><a href="#a-除法运算" class="headerlink" title="a.除法运算"></a>a.除法运算</h3><blockquote>
<p>在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 <code>/</code> 除法运算的功能。也就是说，如果 <code>/</code> 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。</p>
</blockquote>
<p>以下三种情况 <code>/</code> 将被视为除法运算符号：</p>
<ul>
<li>如果值，或值的一部分，是变量或者函数的返回值</li>
<li>如果值被圆括号包裹</li>
<li>如果值是算数表达式的一部分</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 10px/8px<span class="token punctuation">;</span>             <span class="token comment">// Plain CSS, no division</span>
  <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span>/2<span class="token punctuation">;</span>            <span class="token comment">// Uses a variable, does division</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">round</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span>/2<span class="token punctuation">;</span>        <span class="token comment">// Uses a function, does division</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>500px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">// Uses parentheses, does division</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 5px <span class="token operator">+</span> 8px/2px<span class="token punctuation">;</span> <span class="token comment">// Uses +, does division</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 10px/8px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 9px<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>如果需要使用变量，同时又要确保 <code>/</code> 不做除法运算而是完整地编译到 CSS 文件中，只需要用 <code>#&#123;&#125;</code> 插值语句将变量包裹。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">$font-size</span></span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$line-height</span></span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> <span class="token variable">#&#123;$font-size&#125;</span>/<span class="token variable">#&#123;$line-height&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 12px/30px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="2-颜色值运算"><a href="#2-颜色值运算" class="headerlink" title="2. 颜色值运算"></a>2. 颜色值运算</h2><h3 id="1-颜色运算基础"><a href="#1-颜色运算基础" class="headerlink" title="1.颜色运算基础"></a>1.颜色运算基础</h3><blockquote>
<p>颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #010203 <span class="token operator">+</span> #040506<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>计算 <code>01 + 04 = 05</code> <code>02 + 05 = 07</code> <code>03 + 06 = 09</code>，然后编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #050709<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>使用 <a target="_blank" rel="noopener" href="https://www.tutorialsteacher.com/sass/sass-selector-functions">color functions</a> 比计算颜色值更方便一些。</p>
<p>数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #010203 <span class="token operator">*</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>计算 <code>01 * 2 = 02</code> <code>02 * 2 = 04</code> <code>03 * 2 = 06</code>，然后编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #020406<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>颜色值的 alpha channel 可以通过 <a target="_blank" rel="noopener" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#opacify-instance_method">opacify</a> 或 <a target="_blank" rel="noopener" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#transparentize-instance_method">transparentize</a> 两个函数进行调整。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$translucent-red</span></span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">opacify</span><span class="token punctuation">(</span><span class="token variable">$translucent-red</span><span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">transparentize</span><span class="token punctuation">(</span><span class="token variable">$translucent-red</span><span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 <code>#AABBCCDD</code>，使用 <code>ie_hex_str</code> 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$translucent-red</span></span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$green</span></span><span class="token punctuation">:</span> #00ff00<span class="token punctuation">;</span>
<span class="token selector">div </span><span class="token punctuation">&#123;</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.<span class="token function">gradient</span><span class="token punctuation">(</span>enabled=<span class="token string">'false'</span><span class="token punctuation">,</span> startColorstr=<span class="token string">'#&#123;ie-hex-str($green)&#125;'</span><span class="token punctuation">,</span> endColorstr=<span class="token string">'#&#123;ie-hex-str($translucent-red)&#125;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.<span class="token function">gradient</span><span class="token punctuation">(</span>enabled=<span class="token string">'false'</span><span class="token punctuation">,</span> startColorstr=#FF00FF00<span class="token punctuation">,</span> endColorstr=#80FF0000<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h3 id="2-Color-function"><a href="#2-Color-function" class="headerlink" title="2. Color function"></a>2. Color function</h3><h4 id="a-rgb-red-green-blue"><a href="#a-rgb-red-green-blue" class="headerlink" title="a.rgb($red, $green, $blue)"></a>a.rgb($red, $green, $blue)</h4><blockquote>
<p>根据指定的十进制值或百分比创建不透明的颜色</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">rgb</span><span class="token punctuation">(</span>173<span class="token punctuation">,</span> 64<span class="token punctuation">,</span> 56<span class="token punctuation">)</span><span class="token comment">//#ad4038</span>
<span class="token function">rgb</span><span class="token punctuation">(</span>50%<span class="token punctuation">,</span> 50%<span class="token punctuation">,</span> 100%<span class="token punctuation">)</span><span class="token comment">//#8080ff</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h4 id="b-rgba-red-green-blue-alpha"><a href="#b-rgba-red-green-blue-alpha" class="headerlink" title="b.rgba($red, $green, $blue, $alpha)"></a>b.rgba($red, $green, $blue, $alpha)</h4><blockquote>
<p>根据指定的不透明度，以指定的十进制或百分比值创建颜色。</p>
</blockquote>
<h4 id="c-hsl-hue-saturation-lightness"><a href="#c-hsl-hue-saturation-lightness" class="headerlink" title="c.hsl($hue, $saturation, $lightness)"></a>c.hsl($hue, $saturation, $lightness)</h4><blockquote>
<p>根据指定的色调（以度为单位），饱和度和亮度（以百分比为单位）创建不透明的颜色</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token function">hsl</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> 51<span class="token punctuation">,</span> 45<span class="token punctuation">)</span><span class="token comment">//#ad4038</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h4 id="d-hsla-hue-saturation-lightness-alpha"><a href="#d-hsla-hue-saturation-lightness-alpha" class="headerlink" title="d.hsla($hue, $saturation, $lightness, $alpha)"></a>d.hsla($hue, $saturation, $lightness, $alpha)</h4><blockquote>
<p>在指定的不透明度下基于指定的色相，饱和度和亮度创建颜色。</p>
</blockquote>
<h4 id="e-grayscale-color"><a href="#e-grayscale-color" class="headerlink" title="e.grayscale($color)"></a>e.grayscale($color)</h4><blockquote>
<p>返回强度与$ color相同的灰度</p>
</blockquote>
<h4 id="f-complement-color"><a href="#f-complement-color" class="headerlink" title="f.complement($color)"></a>f.complement($color)</h4><blockquote>
<p>返回具有相同饱和度和值的颜色，但色相与$ color的相差180度的颜色。</p>
</blockquote>
<h4 id="g-invert-color"><a href="#g-invert-color" class="headerlink" title="g.invert($color)"></a>g.invert($color)</h4><blockquote>
<p>返回$ color的红色，绿色和蓝色分量的倒数。</p>
</blockquote>
<h4 id="h-更多"><a href="#h-更多" class="headerlink" title="h.更多"></a>h.更多</h4><blockquote>
<p><a target="_blank" rel="noopener" href="https://www.tutorialsteacher.com/sass/sass-color-functions">https://www.tutorialsteacher.com/sass/sass-color-functions</a></p>
</blockquote>
<h2 id="3-字符串运算"><a href="#3-字符串运算" class="headerlink" title="3. 字符串运算"></a>3. 字符串运算</h2><h3 id="1-可用于连接字符串"><a href="#1-可用于连接字符串" class="headerlink" title="1.+ 可用于连接字符串"></a>1.<code>+</code> 可用于连接字符串</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> e <span class="token operator">+</span> -resize<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> e-resize<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>注意，如果有引号字符串（位于 <code>+</code> 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 <code>+</code> 左侧）连接有引号字符串，运算结果则没有引号。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p:before </span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Foo "</span> <span class="token operator">+</span> Bar<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> sans- <span class="token operator">+</span> <span class="token string">"serif"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p:before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Foo Bar"</span><span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>


<h3 id="2-运算表达式与其他值连用时，用空格做连接符"><a href="#2-运算表达式与其他值连用时，用空格做连接符" class="headerlink" title="2.运算表达式与其他值连用时，用空格做连接符"></a>2.运算表达式与其他值连用时，用空格做连接符</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 3px <span class="token operator">+</span> 4px auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 7px auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>在有引号的文本字符串中使用 <code>#&#123;&#125;</code> 插值语句可以添加动态的值：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p:before </span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"I ate #&#123;5 + 10&#125; pies!"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p:before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"I ate 15 pies!"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>空的值被视作插入了空字符串：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$value</span></span><span class="token punctuation">:</span> <span class="token null keyword">null</span><span class="token punctuation">;</span>
<span class="token selector">p:before </span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"I ate #&#123;$value&#125; pies!"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p:before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"I ate pies!"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="4-布尔运算"><a href="#4-布尔运算" class="headerlink" title="4.布尔运算"></a>4.布尔运算</h2><blockquote>
<p>SassScript 支持布尔型的 <code>and</code> <code>or</code> 以及 <code>not</code> 运算。</p>
</blockquote>
<h2 id="5-数组运算"><a href="#5-数组运算" class="headerlink" title="5.数组运算"></a>5.数组运算</h2><blockquote>
<p>数组不支持任何运算方式，只能使用 <a target="_blank" rel="noopener" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions">list functions</a> 控制。</p>
</blockquote>
<h2 id="6-圆括号"><a href="#6-圆括号" class="headerlink" title="6.圆括号"></a>6.圆括号</h2><blockquote>
<p>圆括号可以用来影响运算的顺序：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1em <span class="token operator">+</span> <span class="token punctuation">(</span>2em <span class="token operator">*</span> 3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 7em<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="7-函数"><a href="#7-函数" class="headerlink" title="7.函数"></a>7.函数</h2><p>SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$hue</span></span><span class="token punctuation">:</span> 0<span class="token punctuation">,</span> <span class="token property"><span class="token variable">$saturation</span></span><span class="token punctuation">:</span> 100%<span class="token punctuation">,</span> <span class="token property"><span class="token variable">$lightness</span></span><span class="token punctuation">:</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。</p>
<h2 id="8-插值语句"><a href="#8-插值语句" class="headerlink" title="8.插值语句 #{}"></a>8.插值语句 <code>#&#123;&#125;</code></h2><p>通过 <code>#&#123;&#125;</code> 插值语句可以在选择器或属性名中使用变量：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$name</span></span><span class="token punctuation">:</span> foo<span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$attr</span></span><span class="token punctuation">:</span> border<span class="token punctuation">;</span>
<span class="token selector">p.<span class="token variable">#&#123;$name&#125;</span> </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">#&#123;$attr&#125;</span>-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p.foo</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p><code>#&#123;&#125;</code> 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 <code>#&#123;&#125;</code> 可以避免 Sass 运行运算表达式，直接编译 CSS。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">$font-size</span></span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property"><span class="token variable">$line-height</span></span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> <span class="token variable">#&#123;$font-size&#125;</span>/<span class="token variable">#&#123;$line-height&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 12px/30px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="9-”-amp-“in-SassScript"><a href="#9-”-amp-“in-SassScript" class="headerlink" title="9.” &amp; “in SassScript"></a>9.” &amp; “in SassScript</h2><p>就像在选择器中使用时一样，＆在SassScript中是指当前的父选择器。 这是一个以逗号分隔的列表，以空格分隔。 例如：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.foo.bar .baz.bang, .bip.qux </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">$selector</span></span><span class="token punctuation">:</span> &amp;<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>$ selector的值现在是（（“ .foo.bar”“ .baz.bang”），“ .bip.qux”）。 复合选择器在这里用引号引起来表示它们是字符串，但实际上它们将不带引号。 即使父选择器不包含逗号或空格，＆也会始终具有两个嵌套级别，因此可以一致地对其进行访问。</p>
<p>如果没有父选择器，则＆的值为空。 这意味着您可以在mixin中使用它来检测是否存在父选择器：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token selector">does-parent-exist </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@if</span> <span class="token selector"><span class="token parent important">&amp;</span> </span><span class="token punctuation">&#123;</span>
    <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">&#123;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">@else</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">a </span><span class="token punctuation">&#123;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="10-变量定义-default"><a href="#10-变量定义-default" class="headerlink" title="10.变量定义 !default"></a>10.变量定义 !default</h2><blockquote>
<p>可以在变量的结尾添加 <code>!default</code> 给一个未通过 <code>!default</code> 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token string">"First content"</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token string">"Second content?"</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$new_content</span></span><span class="token punctuation">:</span> <span class="token string">"First time reference"</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>

<span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token variable">$content</span><span class="token punctuation">;</span>
  <span class="token property">new-content</span><span class="token punctuation">:</span> <span class="token variable">$new_content</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"First content"</span><span class="token punctuation">;</span>
  <span class="token property">new-content</span><span class="token punctuation">:</span> <span class="token string">"First time reference"</span><span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>变量是 null 空值时将视为未被 <code>!default</code> 赋值。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token null keyword">null</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$content</span></span><span class="token punctuation">:</span> <span class="token string">"Non-null content"</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>

<span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token variable">$content</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Non-null content"</span><span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h1 id="4-Rules-与指令"><a href="#4-Rules-与指令" class="headerlink" title="4.@-Rules 与指令"></a>4.@-Rules 与指令</h1><h2 id="1-import导入"><a href="#1-import导入" class="headerlink" title="1.@import导入"></a>1.@import导入</h2><blockquote>
<p>Sass 拓展了 <code>@import</code> 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。</p>
</blockquote>
<p>通常，<code>@import</code> 寻找 Sass 文件并将其导入，但在以下情况下，<code>@import</code> 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。</p>
<ul>
<li>文件拓展名是 <code>.css</code>；</li>
<li>文件名以 <code>http://</code> 开头；</li>
<li>文件名是 <code>url()</code>；</li>
<li><code>@import</code> 包含 media queries。</li>
</ul>
<p>如果不在上述情况内，文件的拓展名是 <code>.scss</code> 或 <code>.sass</code>，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 <code>.scss</code> 或 <code>.sass</code> 的文件并将其导入。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"foo.scss"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>或</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"foo"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>都会导入文件 foo.scss，但是</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"foo.css"</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token string">"foo"</span> screen<span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token string">"http://foo.com/bar"</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"foo.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"foo"</span> screen<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"http://foo.com/bar"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"rounded-corners"</span><span class="token punctuation">,</span> <span class="token string">"text-shadow"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>导入文件也可以使用 <code>#&#123; &#125;</code> 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 <code>url()</code> 导入方式：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$family</span></span><span class="token punctuation">:</span> <span class="token function">unquote</span><span class="token punctuation">(</span><span class="token string">"Droid+Sans"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">@import</span> <span class="token url">url</span><span class="token punctuation">(</span><span class="token string">"http://fonts.googleapis.com/css?family=\#&#123;$family&#125;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"http://fonts.googleapis.com/css?family=Droid+Sans"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h2 id="2-分音-阻止sass编译成css"><a href="#2-分音-阻止sass编译成css" class="headerlink" title="2.分音(阻止sass编译成css)"></a>2.分音(阻止sass编译成css)</h2><blockquote>
<p>如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。</p>
</blockquote>
<p>例如，将文件命名为 <code>_colors.scss</code>，便不会编译 <code>_colours.css</code> 文件。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@import</span> <span class="token string">"colors"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>上面的例子，导入的其实是 <code>_colors.scss</code> 文件</p>
<p>注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。</p>
<h2 id="3-嵌套-import"><a href="#3-嵌套-import" class="headerlink" title="3. 嵌套 @import"></a>3. 嵌套 @import</h2><p>大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 <code>@import</code>，其实，也可以将 <code>@import</code> 嵌套进 CSS 样式或者 <code>@media</code> 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。</p>
<p>假设 example.scss 文件包含以下样式：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.example </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>然后导入到 <code>#main</code> 样式内</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#main </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@import</span> <span class="token string">"example"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>将会被编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main .example</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="4-media媒体查询"><a href="#4-media媒体查询" class="headerlink" title="4.@media媒体查询"></a>4.@media媒体查询</h2><blockquote>
<p>Sass 中 <code>@media</code> 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 <code>@media</code> 嵌套在 CSS 规则内，编译时，<code>@media</code> 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 <code>@media</code> 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.sidebar </span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.sidebar</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
  <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
    <span class="token selector">.sidebar</span> <span class="token punctuation">&#123;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> 
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>@media<code>的 queries 允许互相嵌套使用，编译时，Sass 自动添加</code>and</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token atrule"><span class="token rule">@media</span> screen</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.sidebar </span><span class="token punctuation">&#123;</span>
    <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">.header </span><span class="token punctuation">&#123;</span>
    <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.sidebar</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> 
  <span class="token punctuation">&#125;</span> 
  <span class="token selector">.header</span><span class="token punctuation">&#123;</span>
     <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><code>@media</code> 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$media</span></span><span class="token punctuation">:</span> screen<span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$feature</span></span><span class="token punctuation">:</span> -webkit-min-device-pixel-ratio<span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$value</span></span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token variable">#&#123;$media&#125;</span> <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property"><span class="token variable">$feature</span></span><span class="token punctuation">:</span> <span class="token variable">$value</span><span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.sidebar </span><span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.sidebar</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>对单个元素的分情况媒体查询响应</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token atrule"><span class="token rule">@media</span> screen</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.text_p</span><span class="token punctuation">&#123;</span>
    <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>800px<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>500px<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.text_p </span><span class="token punctuation">&#123;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span> 
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.text_p </span><span class="token punctuation">&#123;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="5-extend继承-延伸"><a href="#5-extend继承-延伸" class="headerlink" title="5.@extend继承(延伸)"></a>5.@extend继承(延伸)</h2><h3 id="1-基本使用"><a href="#1-基本使用" class="headerlink" title="1.基本使用"></a>1.基本使用</h3><p>在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式</p>
<p>，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：</p>
<div class="code-wrapper"><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error seriousError<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  Oh no! You've been hacked!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>样式如下</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.error</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.seriousError</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>麻烦的是，这样做必须时刻记住使用 <code>.seriousError</code> 时需要参考 <code>.error</code> 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 <code>@extend</code> 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.error </span><span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px #f00<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fdd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.seriousError </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .error<span class="token punctuation">;</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>上面代码的意思是将 <code>.error</code> 下的所有样式继承给 <code>.seriousError</code>，<code>border-width: 3px;</code> 是单独给 <code>.seriousError</code> 设定特殊样式，这样，使用 <code>.seriousError</code> 的地方可以不再使用 <code>.error</code>。</p>
<p>其他使用到 <code>.error</code> 的样式也会同样继承给 <code>.seriousError</code>，例如，另一个样式 <code>.error.intrusion</code> 使用了 <code>hacked.png</code> 做背景，<code>&lt;div class=&quot;seriousError intrusion&quot;&gt;</code> 也同样会使用 <code>hacked.png</code> 背景。</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.error.intrusion</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"/image/hacked.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>案例</p>
<div class="code-wrapper"><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML">&lt;div className&#x3D;&#39;wrap&#39;&gt;
    &lt;p className&#x3D;&#39;warning&#39;&gt;普通警告&lt;&#x2F;p&gt;
    &lt;p className&#x3D;&#39;ser_warning&#39;&gt;严重警告&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-SCSS" data-language="SCSS"><code class="language-SCSS">.warning&#123;
  color: red;
&#125;
.ser_warning&#123;
  @extend .warning;
  font-weight: bold;
&#125;
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.warning, .ser_warning</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 
  <span class="token punctuation">&#125;</span>

<span class="token selector">.ser_warning</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> 
  <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="2-复杂选择器的继承-延伸"><a href="#2-复杂选择器的继承-延伸" class="headerlink" title="2.复杂选择器的继承(延伸)"></a>2.复杂选择器的继承(延伸)</h3><p>Class 类选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 <code>.special.cool</code>，<code>a:hover</code> 或者 <code>a.user[href^=&quot;http://&quot;]</code> 等，例如：</p>
<div class="code-wrapper"><pre class="line-numbers language-HTML" data-language="HTML"><code class="language-HTML">&lt;p className&#x3D;&#39;title&#39;&gt;CodingHappier&lt;&#x2F;p&gt;
&lt;p className&#x3D;&#39;info&#39;&gt;current 22 years old&lt;&#x2F;p&gt;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.info</span><span class="token punctuation">&#123;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover</span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .<span class="token property">info</span><span class="token punctuation">:</span>hover
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果  .title继承了.info:hover的样式</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">.info &#123;
  transition: 2s; 
  &#125;
.info:hover, .title &#123;
    color: cyan;
    font-size: 30px;
  &#125;
    
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="3-多重延伸-继承"><a href="#3-多重延伸-继承" class="headerlink" title="3.多重延伸(继承)"></a>3.多重延伸(继承)</h3><blockquote>
<p>同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>title<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>CodingHappier<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>info<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>current 22 years old<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>message<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>You have got a message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>


<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover</span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 2px 2px 12px cyan<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.info</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .<span class="token property">title</span><span class="token punctuation">:</span>hover
<span class="token punctuation">&#125;</span>
<span class="token selector">.message</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .<span class="token property">title</span><span class="token punctuation">:</span>hover
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.title</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">.title:hover, .info, .message</span> <span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 2px 2px 12px cyan<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="4-继续延伸"><a href="#4-继续延伸" class="headerlink" title="4.继续延伸"></a>4.继续延伸</h3><blockquote>
<p>当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，</p>
</blockquote>
<p>依然是第三小节重点dom结构</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss">
<span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover</span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 2px 2px 12px cyan<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.info</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .<span class="token property">title</span><span class="token punctuation">:</span>hover
<span class="token punctuation">&#125;</span>
<span class="token selector">.message</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> .info
<span class="token punctuation">&#125;</span>
<span class="token comment">//.info继承了.title的样式，然后.message直接继承 .info的样式(包括info继承的和info本身的)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="5-选择器列"><a href="#5-选择器列" class="headerlink" title="5.选择器列"></a>5.选择器列</h3><blockquote>
<p>目前暂时不可以将选择器列 (Selector Sequences)，比如 <code>.foo .bar</code> 或 <code>.foo + .bar</code>，延伸给其他元素，但是，却可以将其他元素延伸给选择器列：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#fake-links .link </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> a<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">a </span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">&#123;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">a, #fake-links .link</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">a:hover, #fake-links .link:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h4 id="1-合并选择器列"><a href="#1-合并选择器列" class="headerlink" title="1.合并选择器列"></a>1.合并选择器列</h4><blockquote>
<p>有时会遇到复杂的情况，比如选择器列中的某个元素需要延伸给另一个选择器列，这种情况下，两个选择器列需要合并</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#admin .tabbar a </span><span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo .overview .fakelink </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> a<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>技术上讲能够生成所有匹配条件的结果，但是这样生成的样式表太复杂了，上面这个简单的例子就可能有 10 种结果。所以，Sass 只会编译输出有用的选择器。</p>
<p>当两个列 (sequence) 合并时，如果没有包含相同的选择器，将生成两个新选择器：第一列出现在第二列之前，或者第二列出现在第一列之前：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#admin .tabbar a </span><span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#demo .overview .fakelink </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> a<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>如果两个列 (sequence) 包含了相同的选择器，相同部分将会合并在一起，其他部分交替输出。在下面的例子里，两个列都包含 <code>#admin</code>，输出结果中它们合并在了一起：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#admin .tabbar a </span><span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#admin .overview .fakelink </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> a<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="6-extend-Only"><a href="#6-extend-Only" class="headerlink" title="6.@extend-Only"></a>6.@extend-Only</h3><blockquote>
<p>有时，需要定义一套样式并不是给某个元素用，而是只通过 <code>@extend</code> 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。</p>
</blockquote>
<p>如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 <code>id</code> 或 <code>class</code> 选择器，只是 <code>#</code> 或 <code>.</code> 被替换成了 <code>%</code>。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p.title,p<span class="token placeholder">%info</span></span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p.title</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>当占位符选择器元素，被其他元素或者选择器使用@extend继承的时候，与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p.title,p<span class="token placeholder">%info</span></span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.message</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@extend</span> p<span class="token placeholder selector">%info</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果-可以看到被占位符选择的元素样式，会被继承元素正常继承！</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p.title, .message</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h3 id="7-optional-声明"><a href="#7-optional-声明" class="headerlink" title="7.!optional 声明"></a>7.<code>!optional</code> 声明</h3><blockquote>
<p>当我们的@extend继承了一个不存在的选择器和元素的时候！@extend` 失败会收到错误提示，</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">a.important </span><span class="token punctuation">&#123;</span>
   <span class="token keyword">@extend</span> .notice <span class="token statement keyword">!optional</span><span class="token punctuation">;</span> <span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>
<span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-verilog" data-language="verilog"><code class="language-verilog">The selector <span class="token string">".notice"</span> was <span class="token keyword">not</span> found<span class="token punctuation">.</span>
Use <span class="token string">"@extend .notice !optional"</span> <span class="token keyword">if</span> the extend should be able to fail<span class="token punctuation">.</span>
on line <span class="token number">42</span> of test<span class="token punctuation">.</span>scss<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">a.important </span><span class="token punctuation">&#123;</span>
   <span class="token keyword">@extend</span> .notice <span class="token statement keyword">!optional</span><span class="token punctuation">;</span> <span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>
<span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果-就不报错了只把正确的编译过来了！</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.title</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h3 id="8-在指令中延伸"><a href="#8-在指令中延伸" class="headerlink" title="8.在指令中延伸"></a>8.在指令中延伸</h3><blockquote>
<p>指令中使用 <code>@extend</code> 时（比如在 <code>@media</code> 中）有一些限制：Sass 不可以将 <code>@media</code> 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 <code>@media</code> （或者其他 CSS 指令）中使用 <code>@extend</code>，必须延伸给相同指令层中的选择器。</p>
<p>就是一句话，指令里面的选择器，不要继承指令外的选择器样式</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss">@media screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token selector">.title</span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">.message</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">@extend</span> .title
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token comment">//正确案例！</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">.title</span><span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
@media screen <span class="token operator">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token selector">.message</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">@extend</span> .title
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token comment">//错误案例 </span>
<span class="token comment">//You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive.From "@extend .title" on line 52 of test.scss.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="6-at-root"><a href="#6-at-root" class="headerlink" title="6.@at-root"></a>6.@at-root</h2><blockquote>
<p>默认情况下，@ at-root仅排除选择器。 但是，也可以使用@ at-root移到嵌套指令（例如@media）之外</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.page </span><span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 8in<span class="token punctuation">;</span>
    <span class="token atrule"><span class="token rule">@at-root</span> <span class="token punctuation">(</span><span class="token property">without</span><span class="token punctuation">:</span> media<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译后:</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.page</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 8in<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.page</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>您可以使用@ at-root（without…）将其移出任何指令。 您也可以使用多个指令（用空格分隔）来完成此操作：@ at-root（without：media supports）移动到@media和@supports查询之外。</p>
<p>您可以将两个特殊值传递给@ at-root。 “规则”是指普通的CSS规则； @ at-root（不带规则）与@ at-root相同，没有查询。 @ at-root（without：all）表示样式应移至所有指令和CSS规则之外。</p>
<p>如果要指定要包括的指令或规则，而不是列出应排除的指令或规则，则可以使用with而不是without。 例如，@ at-root（with：rule）将移出所有指令，但会保留所有CSS规则。</p>
<h2 id="7-debug"><a href="#7-debug" class="headerlink" title="7.@debug"></a>7.@debug</h2><blockquote>
<p>@debug指令将SassScript表达式的值打印到标准错误输出流。 这对于调试具有复杂SassScript的Sass文件很有用。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@debug</span> 1px+1px<span class="token punctuation">;</span><span class="token comment">//test.scss:55 DEBUG: 2px</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h2 id="8-warn"><a href="#8-warn" class="headerlink" title="8.@warn"></a>8.@warn</h2><blockquote>
<p>@warn指令将SassScript表达式的值打印到标准错误输出流。 对于需要警告用户已弃用或从轻微的混合使用错误中恢复的库而言，它很有用。 @warn和@debug之间有两个主要区别：</p>
</blockquote>
<ul>
<li>您可以使用–quiet命令行选项或：quiet Sass选项关闭警告。</li>
<li>样式表跟踪将与消息一起打印出来，以便被警告的用户可以看到他们的样式在哪里引起警告。</li>
</ul>
<h2 id="9-error"><a href="#9-error" class="headerlink" title="9.@error"></a>9.@error</h2><blockquote>
<p>@error指令将SassScript表达式的值引发为致命错误，包括不错的堆栈跟踪。 这对于验证mixin和函数的参数很有用。</p>
</blockquote>
<h1 id="5-控制指令"><a href="#5-控制指令" class="headerlink" title="5.控制指令"></a>5.控制指令</h1><blockquote>
<p>SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 <a target="_blank" rel="noopener" href="http://compass-style.org/">Compass</a> 等样式库中。</p>
</blockquote>
<h2 id="1-if"><a href="#1-if" class="headerlink" title="1. if()"></a>1. if()</h2><blockquote>
<p>内置的if（）函数允许您在条件上分支，并且仅返回两个可能结果之一。 它可以在任何脚本上下文中使用。 if函数仅求值与将返回的参数相对应的参数–这使您可以引用可能未定义的变量，或具有可能导致错误的计算（例如，除以零）。</p>
</blockquote>
<h2 id="2-if"><a href="#2-if" class="headerlink" title="2.@if"></a>2.@if</h2><p>当 <code>@if</code> 的表达式返回值不是 <code>false</code> 或者 <code>null</code> 时，条件成立，输出 <code>&#123;&#125;</code> 内的代码：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@if</span> <span class="token selector">1 + 1 == 2 </span><span class="token punctuation">&#123;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token keyword">@if</span> <span class="token selector">5 &lt; 3 </span><span class="token punctuation">&#123;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px dotted<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token keyword">@if</span> <span class="token selector">null  </span><span class="token punctuation">&#123;</span> <span class="token property">border</span><span class="token punctuation">:</span> 3px double<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p><code>@if</code> 声明后面可以跟多个 <code>@else if</code> 声明，或者一个 <code>@else</code> 声明。如果 <code>@if</code> 声明失败，Sass 将逐条执行 <code>@else if</code> 声明，如果全部失败，最后执行 <code>@else</code> 声明，例如：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$type</span></span><span class="token punctuation">:</span> monster<span class="token punctuation">;</span>
<span class="token selector">p </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$type</span> == ocean </span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">@else if</span> <span class="token selector"><span class="token variable">$type</span> == matador </span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">@else if</span> <span class="token selector"><span class="token variable">$type</span> == monster </span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">@else</span> <span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<h2 id="3-for"><a href="#3-for" class="headerlink" title="3.@for"></a>3.@for</h2><blockquote>
<p><code>@for</code> 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：<code>@for $var from &lt;start&gt; through &lt;end&gt;</code>，或者 <code>@for $var from &lt;start&gt; to &lt;end&gt;</code>，区别在于 <code>through</code> 与 <code>to</code> 的含义：<em>当使用 <code>through</code> 时，条件范围包含 <code>&lt;start&gt;</code> 与 <code>&lt;end&gt;</code> 的值，而使用 <code>to</code> 时条件范围只包含 <code>&lt;start&gt;</code> 的值不包含 <code>&lt;end&gt;</code> 的值</em>。另外，<code>$var</code> 可以是任何变量，比如 <code>$i</code>；<code>&lt;start&gt;</code> 和 <code>&lt;end&gt;</code> 必须是整数值。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> 1 <span class="token keyword">through</span> <span class="token selector">3 </span><span class="token punctuation">&#123;</span>
  <span class="token selector">.item-<span class="token variable">#&#123;$i&#125;</span> </span><span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.item-1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.item-2</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 4em<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">.item-3</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 6em<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> <span class="token selector">1 to 3 </span><span class="token punctuation">&#123;</span>
  <span class="token selector">.item-<span class="token variable">#&#123;$i&#125;</span> </span><span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>编译成</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.item-1</span> <span class="token punctuation">&#123;</span>
  	<span class="token property">width</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.item-2</span> <span class="token punctuation">&#123;</span>
  	<span class="token property">width</span><span class="token punctuation">:</span> 4em<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="4-each"><a href="#4-each" class="headerlink" title="4.@each"></a>4.@each</h2><blockquote>
<p><code>@each</code> 指令的格式是 <code>$var in &lt;list&gt;</code>, <code>$var</code> 可以是任何变量名，比如 <code>$length</code> 或者 <code>$name</code>，而 <code>&lt;list&gt;</code> 是一连串的值，也就是值列表。</p>
</blockquote>
<p><code>@each</code> 将变量 <code>$var</code> 作用于值列表中的每一个项目，然后输出结果</p>
<p>Dom结构</p>
<div class="code-wrapper"><pre class="line-numbers language-jsx" data-language="jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>red<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">red</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>darkcyan<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">darkcyan</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>blue<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">blue</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$className</span> in red darkcyan blue</span><span class="token punctuation">&#123;</span>
  <span class="token selector">.<span class="token variable">#&#123;$className&#125;</span></span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$className</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.red</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.darkcyan</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> darkcyan<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.blue</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="5-each的多重分配"><a href="#5-each的多重分配" class="headerlink" title="5.@each的多重分配"></a>5.@each的多重分配</h2><blockquote>
<p>@each指令也可以使用多个变量，例如@each中的$ var1，$ var2，…。 如果是列表列表，则子列表的每个元素都分配给相应的变量。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@each</span> <span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$borderWidth</span><span class="token punctuation">,</span><span class="token variable">$borderStyle</span> in <span class="token punctuation">(</span>red<span class="token punctuation">,</span>5px<span class="token punctuation">,</span>solid<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span>darkcyan<span class="token punctuation">,</span>10px<span class="token punctuation">,</span>dashed<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span>blue<span class="token punctuation">,</span>20px<span class="token punctuation">,</span>solid<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token selector">.#</span><span class="token punctuation">&#123;</span> <span class="token variable">$color</span><span class="token punctuation">&#125;</span><span class="token punctuation">&#123;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> <span class="token variable">$color</span> <span class="token variable">$borderStyle</span> <span class="token variable">$borderWidth</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.red</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> red solid 5px<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.darkcyan</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> darkcyan dashed 10px<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.blue</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> blue solid 20px<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://user-gold-cdn.xitu.io/2020/6/17/172c2b92a3b0c405?w=1160&h=754&f=png&s=43348" srcset="/img/loading.gif"></p>
<p>这个放一下页面效果拉！</p>
<h2 id="while"><a href="#while" class="headerlink" title="@while"></a>@while</h2><blockquote>
<p><code>@while</code> 指令重复输出格式直到表达式返回结果为 <code>false</code>。这样可以实现比 <code>@for</code> 更复杂的循环，只是很少会用到</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$i</span></span><span class="token punctuation">:</span> 6<span class="token punctuation">;</span>
<span class="token keyword">@while</span> <span class="token selector"><span class="token variable">$i</span> > 0 </span><span class="token punctuation">&#123;</span>
  <span class="token selector">.item-<span class="token variable">#&#123;$i&#125;</span> </span><span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token property"><span class="token variable">$i</span></span><span class="token punctuation">:</span> <span class="token variable">$i</span> <span class="token operator">-</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.item-6</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 12em<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>

<span class="token selector">.item-4</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 8em<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span>

<span class="token selector">.item-2</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 4em<span class="token punctuation">;</span> 
 <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h1 id="6-混合指令-Mixin"><a href="#6-混合指令-Mixin" class="headerlink" title="6.混合指令 (Mixin)"></a>6.混合指令 (Mixin)</h1><blockquote>
<p>混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 <code>.float-left</code>。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。</p>
</blockquote>
<h2 id="1-定义混合指令-mixin"><a href="#1-定义混合指令-mixin" class="headerlink" title="1.定义混合指令 @mixin"></a>1.定义混合指令 <code>@mixin</code></h2><blockquote>
<p>混合指令的用法是在 <code>@mixin</code> 后添加名称与样式</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token selector">large-text </span><span class="token punctuation">&#123;</span>
  <span class="token selector">font: </span><span class="token punctuation">&#123;</span>
    <span class="token property">family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">;</span>
    <span class="token property">size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>混合也需要包含选择器和属性，甚至可以用 <code>&amp;</code> 引用父选择器：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token selector">clearfix </span><span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:after </span><span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
    <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">* html <span class="token parent important">&amp;</span> </span><span class="token punctuation">&#123;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="2-引入混入样式"><a href="#2-引入混入样式" class="headerlink" title="2.引入混入样式"></a>2.引入混入样式</h2><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token selector">large-text</span><span class="token punctuation">&#123;</span> <span class="token comment">//定义混入</span>
  <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.red</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@include</span> large-text<span class="token punctuation">;</span><span class="token comment">//引入混入</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.red</span> <span class="token punctuation">&#123;</span>
  	<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  	<span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
  	<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  	<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="3-定义混入传参（Arguments）"><a href="#3-定义混入传参（Arguments）" class="headerlink" title="3.定义混入传参（Arguments）"></a>3.定义混入传参（Arguments）</h2><h3 id="1-基本用法"><a href="#1-基本用法" class="headerlink" title="1.基本用法"></a>1.基本用法</h3><div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token variable">$width</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">border: </span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span><span class="token punctuation">;</span>
    <span class="token property">style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">p </span><span class="token punctuation">&#123;</span> 
  <span class="token keyword">@include</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span>blue<span class="token punctuation">,</span> 1in<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//调用</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 1in<span class="token punctuation">;</span>
  <span class="token property">border-style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 1in<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">border: </span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span><span class="token punctuation">;</span>
    <span class="token property">style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">p </span><span class="token punctuation">&#123;</span> 
  <span class="token keyword">@include</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span>blue<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">h1 </span><span class="token punctuation">&#123;</span> 
  <span class="token keyword">@include</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span>blue<span class="token punctuation">,</span> 2in<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  	<span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  	<span class="token property">border-width</span><span class="token punctuation">:</span> 1in<span class="token punctuation">;</span>
  	<span class="token property">border-style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h1</span> <span class="token punctuation">&#123;</span>
  	<span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  	<span class="token property">border-width</span><span class="token punctuation">:</span> 2in<span class="token punctuation">;</span>
  	<span class="token property">border-style</span><span class="token punctuation">:</span> dashed
 <span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="2-关键词参数-Keyword-Arguments"><a href="#2-关键词参数-Keyword-Arguments" class="headerlink" title="2.关键词参数 (Keyword Arguments)"></a>2.关键词参数 (Keyword Arguments)</h3><blockquote>
<p>混合指令也可以使用关键词参数</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">p </span><span class="token punctuation">&#123;</span> 
  <span class="token keyword">@include</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> blue<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">h1 </span><span class="token punctuation">&#123;</span> 
  <span class="token keyword">@include</span> <span class="token function">sexy-border</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> blue<span class="token punctuation">,</span> <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 2in<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>这样的写法，键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。</p>
</blockquote>
<h3 id="3-不定参数变量"><a href="#3-不定参数变量" class="headerlink" title="3.不定参数变量"></a>3.不定参数变量</h3><blockquote>
<p>有时，不能确定混合指令需要使用多少个参数，比如一个关于 <code>box-shadow</code> 的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时，可以使用参数变量 <code>…</code> 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token function">box-style</span><span class="token punctuation">(</span><span class="token variable">$shadows</span>...<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$shadows</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$shadows</span><span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">$shadows</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.red</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@include</span> <span class="token function">box-style</span><span class="token punctuation">(</span>3px 3px 6px red<span class="token punctuation">,</span>5px 5px 12px yellow<span class="token punctuation">,</span>8px 12px 12px darkblue <span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.red</span> <span class="token punctuation">&#123;</span>
  	 <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> 3px 3px 6px red<span class="token punctuation">,</span> 5px 5px 12px yellow<span class="token punctuation">,</span> 8px 12px 12px darkblue<span class="token punctuation">;</span>
 		 <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> 3px 3px 6px red<span class="token punctuation">,</span> 5px 5px 12px yellow<span class="token punctuation">,</span> 8px 12px 12px darkblue<span class="token punctuation">;</span>
  	 <span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 6px red<span class="token punctuation">,</span> 5px 5px 12px yellow<span class="token punctuation">,</span> 8px 12px 12px darkblue<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>参数变量也可以用在引用混合指令的时候 (<code>@include</code>)，与平时用法一样，将一串值列表中的值逐条作为参数引用：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token function">colors</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">,</span> <span class="token variable">$background</span><span class="token punctuation">,</span> <span class="token variable">$border</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$background</span><span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$border</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token property"><span class="token variable">$values</span></span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">,</span> #00ff00<span class="token punctuation">,</span> #0000ff<span class="token punctuation">;</span><span class="token comment">//定义一个数组的变量</span>
<span class="token selector">.primary </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@include</span> <span class="token function">colors</span><span class="token punctuation">(</span><span class="token variable">$values</span>...<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.primary</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #00ff00<span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> #0000ff<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="4-content-向混合样式中导入内容"><a href="#4-content-向混合样式中导入内容" class="headerlink" title="4.@content 向混合样式中导入内容"></a>4.@content 向混合样式中导入内容</h3><blockquote>
<p>在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 <code>@content</code> 标志的地方：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token keyword">@mixin</span> <span class="token selector">apply-to-ie6-only </span><span class="token punctuation">&#123;</span>
  <span class="token selector">* html </span><span class="token punctuation">&#123;</span>
    <span class="token keyword">@content</span><span class="token punctuation">;</span><span class="token comment">//留位置等使用混入的时候导入的部分放在这里</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">@include</span> <span class="token selector">apply-to-ie6-only </span><span class="token punctuation">&#123;</span>
  <span class="token selector">#logo </span><span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/logo.gif<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">* html #logo</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/logo.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p><strong>为便于书写，<code>@mixin</code> 可以用 <code>=</code> 表示，而 <code>@include</code> 可以用 <code>+</code> 表示</strong>，所以上面的例子可以写成：</p>
<div class="code-wrapper"><pre class="line-numbers language-sass" data-language="sass"><code class="language-sass"><span class="token atrule-line"><span class="token atrule">=</span>apply-to-ie6-only</span>
  <span class="token selector">* html</span>
<span class="token atrule-line">    <span class="token atrule">@content</span></span>

<span class="token atrule-line"><span class="token atrule">+</span>apply-to-ie6-only</span>
  <span class="token selector">#logo</span>
<span class="token property-line">    <span class="token property">background-image</span><span class="token punctuation">:</span> </span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/logo.gif<span class="token punctuation">)</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="5-可变范围和内容块"><a href="#5-可变范围和内容块" class="headerlink" title="5.可变范围和内容块"></a>5.可变范围和内容块</h3><blockquote>
<p>传递给mixin的内容块是在定义块的范围内而不是mixin的范围内进行评估的。 这意味着无法在传递的样式块内使用mixin局部变量，并且变量将解析为全局值：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token keyword">@mixin</span> <span class="token function">colors</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> blue<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span> 
  <span class="token keyword">@content</span><span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.colors </span><span class="token punctuation">&#123;</span>
  <span class="token keyword">@include</span> <span class="token selector">colors </span><span class="token punctuation">&#123;</span>  <span class="token comment">//这里使用mixin并没有传参，所以除content以外都使用默认值</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span> <span class="token comment">//这里的内容将替换@content区域</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.colors</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>Additionally, this makes it clear that the variables and mixins that are used within the passed block are related to the other styles around where the block is defined.</p>
<p>此外，这很清楚地表明，在所传递的块中使用的变量和mixin与定义该块的其他样式有关。 例如：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#sidebar </span><span class="token punctuation">&#123;</span>
  <span class="token property"><span class="token variable">$sidebar-width</span></span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$sidebar-width</span><span class="token punctuation">;</span>
  <span class="token keyword">@include</span> <span class="token selector">smartphone </span><span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$sidebar-width</span> <span class="token operator">/</span> 3<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h1 id="7-函数式指令"><a href="#7-函数式指令" class="headerlink" title="7.函数式指令"></a>7.函数式指令</h1><blockquote>
<p>Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token property"><span class="token variable">$grid-width</span></span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$gutter-width</span></span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>

<span class="token keyword">@function</span> <span class="token function">grid-width</span><span class="token punctuation">(</span><span class="token variable">$n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
	<span class="token comment">//5*40+4*10 = 240</span>
  <span class="token keyword">@return</span> <span class="token variable">$n</span> <span class="token operator">*</span> <span class="token variable">$grid-width</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token variable">$n</span> <span class="token operator">-</span> 1<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token variable">$gutter-width</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">#sidebar </span><span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">grid-width</span><span class="token punctuation">(</span>5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译为</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#sidebar</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 240px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 <code>@return</code> 输出结果。</p>
<p>自定义的函数也可以使用关键词参数，上面的例子还可以这样写：</p>
<div class="code-wrapper"><pre class="line-numbers language-scss" data-language="scss"><code class="language-scss"><span class="token selector">#sidebar </span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">grid-width</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$n</span></span><span class="token punctuation">:</span> 5<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。</p>
<p>自定义函数与 mixin 相同，都支持 variable arguments</p>
<h1 id="8-输出格式"><a href="#8-输出格式" class="headerlink" title="8.输出格式"></a>8.输出格式</h1><p>Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。</p>
<p>Sass 提供了四种输出格式，可以通过 <code>:style option</code> 选项设定，或者在命令行中使用 <code>--style</code> 选项。</p>
<h3 id="1-nested"><a href="#1-nested" class="headerlink" title="1. :nested"></a>1. <code>:nested</code></h3><p>Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
  <span class="token selector">#main p</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>

<span class="token selector">.huge</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="2-expanded"><a href="#2-expanded" class="headerlink" title="2. :expanded"></a>2. <code>:expanded</code></h3><p>Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">#main p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.huge</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="3-compact"><a href="#3-compact" class="headerlink" title="3. :compact"></a>3. <code>:compact</code></h3><p>Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span> <span class="token punctuation">&#123;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span class="token selector">#main p</span> <span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>

<span class="token selector">.huge</span> <span class="token punctuation">&#123;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="4-compressed"><a href="#4-compressed" class="headerlink" title="4. :compressed"></a>4. <code>:compressed</code></h3><p>Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">#main</span><span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#000<span class="token punctuation">&#125;</span><span class="token selector">#main p</span><span class="token punctuation">&#123;</span><span class="token property">width</span><span class="token punctuation">:</span>10em<span class="token punctuation">&#125;</span><span class="token selector">.huge</span><span class="token punctuation">&#123;</span><span class="token property">font-size</span><span class="token punctuation">:</span>10em<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/Css%E9%A2%84%E5%A4%84%E7%90%86/">Css预处理</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/45054/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Vue实现自己的小组件</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/29271/">
                        <span class="hidden-mobile">SpringWithMybatis</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
